<template>
  <div>
    <transition name="slideUp">
      <section class="top-img" v-if="adense"><a href="javascript:;" class="ad-close-btn" @click="close"></a>
      </section>
    </transition>
  </div>
</template>

<script>

  export default {
    data() {
      return {
        adense:true
      }
    },
    methods: {
      close(){
        this.adense = false
        setTimeout(() => {
          this.marginTop = true;
        }, 500)

        this.$emit('close')
      }
    }
  }
</script>

<style scoped rel='stylesheet/scss' lang='scss'>
  .top-img {
    width: 100%;
    height: 100px;
    background: #fff url("../common/images/header.png") no-repeat;
    background-size: cover;
  .ad-close-btn {
    position: absolute;
    top: 0;
    left: 0;
    width: 40px;
    height: 40px;
    z-index: 2;
  }
  }

  .slideUp-enter-active, .slideUp-leave-active {
    transition: all .5s ease;
  }

  .slideUp-enter, .slideUp-leave-to {
    transform: translate3d(0, -80px, 0);
  }


</style>
